<template>
	<view>
		<div class="xjsy">

			<template v-if="currStep==1">
				<div class="mmsz" @click="clickTest">
					<ul>
						<li class="input-item">
							<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a48.png"></image>
							<input v-model="formData.mobile" maxlength="11" type="number" class="wby2"
								placeholder="请输入手机号码" />
						</li>
						<li class="input-item">
							<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a50.png"></image>
							<input v-model="formData.code" type="number" class="wby2" placeholder="请输入验证码" />
							<b class="yzm" @click="getCode"
								:class="{disabled: !mobileSuccess || getCodeBtnDisabled}">{{getCodeText}}</b>
						</li>
					</ul>
				</div>

				<button type="button" @click="nextStep(2)" class="btn1"
					:class="{disabled:!formData.mobile || !formData.code}">下一步</button>
			</template>


			<template v-if="currStep==2">
				<div class="mmsz">
					<ul>
						<li class="input-item">
							<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a44.png"></image>
							<input v-model="formData.password" type="password" class="wby2" placeholder="请设置密码" />
						</li>
						<li class="input-item">
							<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a44.png"></image>
							<input v-model="formData.confirmPassword" type="password" class="wby2"
								placeholder="请再次设置密码" />
						</li>
					</ul>
				</div>

				<button type="button" @click="currStep=3" :class="{disabled:!pwdSuccess}" class="btn1">下一步</button>
			</template>

			<template v-if="currStep==3">
				<div class="mmsz">
					<ul>
						<li class="input-item">
							<image mode="widthFix" class="uni-img-tag" src="https://iyouhaolife-1316622368.cos.ap-chongqing.myqcloud.com/h5/static/imgs/a50.png"></image>
							<input v-model="formData.inviteCode" :disabled="disabledEdit" type="text" class="wby2"
								placeholder="请输入邀请码" />
						</li>
					</ul>
				</div>

				<button type="button" @click="submit" class="btn1">确定</button>

			</template>

			<view v-if="showTest>10">
				test query:
				<view class="">
					{{testVal}}
				</view>
				<view class="">
					{{testObject}}
				</view>
			</view>

		</div>

	</view>
</template>

<script>
	import http from "@/common/http.js"
	import user from "@/common/user.js"

	const MOBILE_REG = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;


	var timer;
	// #ifdef H5
	function isAndroid() {
		var u = navigator.userAgent;
		return u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
	}
	// #endif


	export default {
		data() {
			return {
				currStep: 1,
				getCodeText: '发送验证码',
				getCodeBtnDisabled: false,
				formData: {
					mobile: '',
					code: '',
					password: '',
					confirmPassword: '',
					inviteCode: '',
				},
				disabledEdit: false,
				testVal: '',
				testObject: '',
				showTest: false,
			}
		},
		onLoad(option) {
			// #ifdef H5
			this.formData.inviteCode = option.invite_code || window.localStorage.getItem('__invite_code__');
			// #endif
			// #ifdef MP-WEIXIN
			this.formData.inviteCode = option.id
			if (!this.formData.inviteCode) {
				try {
					let scene1 = decodeURIComponent(option.scene)
					console.log("scene1:"+scene1)
					let scene = scene1.split('=');
					console.log("scene:"+scene)
					if (scene) {
						this.formData.inviteCode = scene[1];
					}
					
					this.testVal = scene1;
					this.testObject = JSON.stringify(scene1);
				} catch (err) {

				}
			}
			// #endif
			
			console.log(this.formData.inviteCode)
			
			
			if (this.formData.inviteCode) {
				this.disabledEdit = true;
			}
		},
		computed: {
			mobileSuccess() {
				return MOBILE_REG.test(this.formData.mobile)
			},
			pwdSuccess() {
				if (!this.formData.password) {
					return false
				}
				return this.formData.password == this.formData.confirmPassword;
			}
		},
		methods: {
			clickTest() {
				if (timer) {
					clearTimeout(timer)
				}
				this.showTest++;
				timer = setTimeout(() => {
					if (this.showTest < 10) {
						this.showTest = 0;
					}
				}, 1000);
			},
			// 获取手机验证码js封装
			showTimer() {
				var t = 60; //设置等待时间
				var timer;
				this.getCodeBtnDisabled = true;
				this.getCodeText = t + '秒后重新发送';
				timer = setInterval(() => {
					if (t > 0) {
						t--;
						this.getCodeText = t + '秒后重新发送';
					} else {
						clearInterval(timer);
						this.getCodeText = '重新获取';
						this.getCodeBtnDisabled = false;
					}
				}, 1000);
			},
			nextStep(setp) {
				if (setp == 2) {
					if (this.formData.mobile && this.formData.code) {
						this.verifyCode();
					}
				}
			},
			verifyCode() {
				user.verifyCode(this.formData.mobile, this.formData.code, () => {
					this.currStep = 2;
				})
			},
			getCode() {
				if (this.getCodeBtnDisabled) return;

				if (!this.formData.mobile) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return;
				}


				if (!this.mobileSuccess) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					})
					return;
				}

				user.getVerifyCode(this.formData.mobile, 1, code => {
					console.log(code);
					this.showTimer();
				})

			},
			submit() {
				http.request({
					url: '/api/v1/register',
					method: 'POST',
					params: this.formData,
					success: ret => {
						console.log(ret);
						uni.showToast({
							icon: 'success',
							title: '注册成功'
						})

						// #ifdef H5
						if (isAndroid()) {
							uni.reLaunch({
								url: 'download'
							})
							return
						}
						// #endif

						uni.reLaunch({
							url: 'login'
						})
					},
					fail: ret => {
						console.log(ret);
						let step = 3;

						if (ret.errorMessage == '验证码过期或者无效,请先获取验证码') {
							step = 1;
						}


						uni.showModal({
							title: '注册失败',
							content: ret.errorMessage,
							showCancel: false,
							success: () => {
								if (this.currStep != step) {
									this.currStep = step;
								}
							}
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.mmsz {
		margin-top: 60rpx;
	}
</style>
